<template>
	<view>
		<navigationTop isBack="true"  imgSrc="../../static/img/Logo-ERoad-文字版-1.png"></navigationTop>
		<view class="discountsBox">
			<view class="discounts" v-for="item in discountsTitle" :key="item.id" @tap="handleTitle(item.id)" :class="[discountsAcitve === item.id?'active':'']">
				<text>{{item.title}}</text>
				<image src="../../static/img/icon-选中-03.png" mode="widthFix" v-show="discountsAcitve === item.id"></image>
			</view>
		</view>
		<empty></empty>
		
	</view>
</template>

<script>
	import navigationTop from "../../components/navigationTop/navigationTop.vue"
	import empty from "../../components/empty/empty.vue"
	export default {
		data() {
			return {
				discountsTitle:[
					{
						id:0,
						title:"优惠券"
					},
					{
						id:1,
						title:"发票"
					}
				],
				discountsAcitve:0,
			}
		},
		components:{
			navigationTop,
			empty
		},
		methods: {
			handleTitle(id){
				this.discountsAcitve = id
			}
		}
	}
</script>

<style lang="scss">
	.discountsBox{
		display: flex;
		height: 104rpx;
		align-items: center;
		.discounts{
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #545454;
			text{
				display: block;
			}
		}
		.discounts:nth-child(1){
			margin: auto 36rpx auto 44rpx;
		}
		image{
			float: right;
			width: 48rpx;
		}
		.active{
			font-weight: 800;
			color: #333333;
		}
	}
</style>
